<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style5.css" />
	<script src="js/modernizr.custom.63321.js"></script>

	<style type="text/css">

		body{
			background-image: url("images/grid_DominikKiss_SubtlePatterns.jpg");
		}

		* {
			font-family: 'Roboto', sans-serif;
		}


		button:focus {
			outline: none;
		}

		button:hover {
			background: #9b59b6;
		}

		h2 {
			font-size: 22px;
			line-height: 1.6;
			text-align: center;
			font-weight: 300;
			color: #777;
			font-family: 'Roboto', sans-serif;
			margin: 100px 0 0;
		}
		/*按钮居中变小
        */
		#button-wrapper {
			width: 450px;
			text-align: center;
			padding: 0 100px;
			box-sizing: border-box;
			-webkit-transition: .3s all ease .3s;
			transition: .3s all ease .3s;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
		}

		button {
			width: 100%;
			background: #8e44ad;
			border: none;
			border-radius: 50px;
			padding: 5px 0;
			cursor: pointer;
			-webkit-transition: .3s all ease;
			transition: .3s all ease;
			position: relative;
		}

		button p {
			color: white;
			font-size: 18px;
			font-weight: 400;
			line-height: 40px;
			max-height: 40px;
			-webkit-transition: .3s all ease;
			transition: .3s all ease;
		}

		/*button .fill {*/
		/*	position: absolute;*/
		/*	top: 0;*/
		/*	left: 0;*/
		/*	bottom: 0;*/
		/*	right: 0;*/
		/*	width: 0%;*/
		/*	background: #8e44ad;*/
		/*	border-radius: 50px;*/
		/*}*/

		button .fa {
			font-size: 25px;
			color: white;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			line-height: 50px;
			-webkit-transform: scale(0);
			-ms-transform: scale(0);
			transform: scale(0);
		}

		#button-wrapper.clicked {
			padding: 0;
		}

		#button-wrapper.clicked button {
			background: #ccc;
			margin-top: 25px;
		}

		#button-wrapper.clicked button p {
			max-height: 0;
			overflow: hidden
		}

		#button-wrapper.clicked button .fill {
			width: 100%;
			-webkit-transition: .3s all ease .3s;
			transition: 2s all ease .6s;
		}

		#button-wrapper.success button {
			margin: 0;
			padding: 25px;
			width: 50px;
		}

		#button-wrapper.success button .fa {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			-webkit-transition: .3s all ease .3s;
			transition: .3s all ease .3s;
		}
	</style>
	<!--		<style>-->
	<!--			body{-->
	<!--				background-image: url("images/grid_DominikKiss_SubtlePatterns.jpg");-->
	<!--			}-->
	<!--		</style>-->

</head>
<form action="surveyServlet6" method="post">
	<body>
	<div class="container">
		<header class="clearfix">
			<h1>房屋推荐问卷<span>选择时请点击下拉选择菜单</span></h1>
			<nav class="codrops-demos">
				<a href="survey1.html">您的月收入</a>
				<a href="survey2.html">购房面积</a>
				<a href="survey3.html">购房地区位置</a>
				<a href="survey4.html">购房小区需求</a>
				<a href="survey5.html">购房楼层需求</a>
				<a class="current-demo" href="survey6.html">楼层建造时间</a>
			</nav>
		</header>
		<section class="main">
			<div class="fleft">
				<p>请选择您所购目标房屋的建造时间：</p>
			</div>


			<div class="fleft">
				<select id="cd-dropdown"   name="cd-dropdown"  class="cd-select">
					<option value="-1" selected>请选择您的选项</option>
					<option value="1" class="icon-camera">2010年以前建造</option>
					<option value="2" class="icon-diamond">2010-2013年建造</option>
					<option value="3" class="icon-rocket">2013-2016年建造</option>
					<option value="4" class="icon-star">2016-2019年建造</option>
				</select>

			</div>


		</section>
	</div><!-- /container -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.dropdown.js"></script>
	<script type="text/javascript">

		$( function() {

			$( '#cd-dropdown' ).dropdown( {
				gutter : 5,
				stack : false,
				delay : 100,
				slidingIn : 100
			} );

		});

	</script>




	<div class="htmleaf-container">
		<div class="htmleaf-content">
			<div id="button-wrapper">
				<button type="submit">
					<p>提交</p>
					<div class="fill"></div>
					<div class="fa fa-check"></div>
				</button>
			</div>
		</div>
		<script src='/按钮/js1/jquery-1.11.0.min.js'></script>
		<script>
			(function () {
				'use strict';
				var $button = $('button');
				$button.on('click', function () {
					$(this).parent().addClass('clicked').delay(2600).queue(function () {
						$(this).addClass('success');
					});
				});
			}());
		</script>
	</div>
	</body>
</form>
</html>
